<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>New Html</title>
    <style>
        .addBtn{
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <label for="">姓名:<input type="text" class="userName"></label><br>
    <label for="">年龄:<input type="text" class="userAge"></label><br>
    <button type="button" class="addBtn">添加</button>
    <table border="1" width="400" style="border-collapse: collapse;text-align: center;margin-top: 10px;">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
          
        </tbody>
    </table>



    <script>
        // 获取dom元素
        var userName = document.querySelector('.userName');
        var userAge = document.querySelector('.userAge');
        var addBtn = document.querySelector('.addBtn');
        var tbody = document.querySelector('tbody');


        getData();
        // 获取数据
        function getData(){
            // 创建xhr对象
            var xhr = new XMLHttpRequest();
            // 规定请求方式
            xhr.open('GET','http://127.0.0.1:3000/list');
            // 发送数据
            xhr.send();
            // 监听响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    console.log('成功响应');
                    // console.log(xhr.responseText);
                    // 接收数据并且转换成JSON对象
                    var data = JSON.parse(xhr.responseText);
                    // console.log(data);
                    showData(data)
                }
            }
        }


        // 渲染函数
        function showData(arr){
            console.log(arr);
            var str = '';
            for(var i =0;i<arr.length;i++){
                str+=`
                    <tr>
                        <td>${i+1}</td>
                        <td>${arr[i].userName}</td>
                        <td>${arr[i].userAge}</td>
                        <td><button type="button" onclick ='delBtn(${arr[i].id})'>删除</button></td>
                    </tr>
                `
            }
            tbody.innerHTML = str;
        }


        // 添加数据
        addBtn.onclick = function(){
            if(userName.value == '' || userAge.value ==""){
                alert('请您完善信息!');
                return;
            }
            // 创建xhr对象
            var xhr = new XMLHttpRequest();
            // 规定请求方式
            xhr.open("POST","http://127.0.0.1:3000/add");
            // post传参请求头
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            // 发送数据
            xhr.send(`userName=${userName.value}&userAge=${userAge.value}`);
            // 监听响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status ==200){
                    // var data = xhr.responseText;
                    // console.log(data);
                    // 调用渲染
                    getData();
                    userName.value = userAge.value = '';
                }
            }

        }



        // 删除函数
        function delBtn(id){
            // console.log(id);
            // 创建xhr对象
            var xhr = new XMLHttpRequest();
            // 规定请求方式
            xhr.open('GET',`http://127.0.0.1:3000/del?id=${id}`);
            // 发送数据
            xhr.send();
            // 监听响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    console.log('删除成功');
                    getData();
                }
            }
        }


    </script>
</body>

</html>